<template>
  <div
    v-if="isShow"
    class="container"
  >
    <img
      src="@/assets/loading.gif"
      class="img"
      alt=""
    >
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {

    ...mapState({
      isShow: (state) => state.loading.isShow,
    }),
  },
};
</script>

<style lang="scss" scoped>
  .container {
    position : fixed;
    top : 0;
    left : 0;
    display : flex;
    align-items : center;
    justify-content : center;
    width : 100vw;
    height : 100vh;
    background-color : black;
    opacity : 0.3;
  }

  .img {
    width : 100px;
    height : 100px;
  }
</style>
